<template>
  <el-card class="box-card">
    <div slot="header" class="card-header clearfix">
      <h5 class="title pull-left">账号信息</h5>
    </div>
    <div class="card-wrapper">
      <el-row>
        <el-col :span="12">
          <div class="user-info-wrapper">
            <avatar :img-width="40" :avatar-uri="renderData.photo" :alt="renderData.name" />
            <strong>姓名：</strong>
            {{ renderData.name }}
          </div>
        </el-col>
        <el-col :span="12">
          <strong>关联医生：</strong>
          <router-link :to="`/users/list/${renderData.userid}`">{{ renderData.name }}</router-link>
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="24">
          <strong>OpenId：</strong>
          {{ renderData.openid }}
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="24">
          <strong>UnionId：</strong>
          {{ renderData.unionid }}
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="12">
          <strong>国家：</strong>
          {{ renderData.nation }}
        </el-col>
        <el-col :span="12">
          <strong>省份城市：</strong>
          {{ renderData.province }} {{ renderData.city }}
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="12">
          <strong>关注时间：</strong>
          {{ renderData.attentiondate | moment('YYYY-MM-DD HH:mm:ss') }}
        </el-col>
        <el-col :span="12">
          <strong>取消关注时间：</strong>
          {{ renderData.offattentiondate | moment('YYYY-MM-DD HH:mm:ss') }}
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="24">
          <strong>创建时间：</strong>
          {{ renderData.setdate | moment('YYYY-MM-DD HH:mm:ss') }}
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="24">
          <strong>已关注：</strong>
          <i v-if="renderData.attention === 1" class="el-icon-check text-success" />
          <i v-else class="el-icon-close text-warning" />
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import {
  getWechatAccountsList
} from '@/api/wechatAccounts'
import Avatar from '@/components/Avatar'

export default {
  name: 'WechatAccountDetail',
  components: {
    Avatar
  },
  props: {
    accountId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      renderData: {}
    }
  },
  created() {
    this.fetchData(this.accountId)
  },
  methods: {
    fetchData(id) {
      getWechatAccountsList({ id }).then(response => {
        const resData = response.data[0]
        // console.log(resData)
        this.renderData = resData
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.account-form {
  margin-top: 60px;
}
</style>
